<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Markmap</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      #mindmap {
        display: block;
        width: 100vw;
        height: 100vh;
      }
    </style>
  </head>
  <body>
    <svg id="mindmap"></svg>
    <script src="https://cdn.jsdelivr.net/npm/d3@5"></script>
    <script src="https://cdn.jsdelivr.net/npm/markmap-lib@0.8.0/dist/browser/view.min.js"></script>
    <script>
      ;((a, t, e, n) => {
        const { Markmap: s, loadPlugins: o } = window.markmap
        ;(t ? t(o, e, n) : Promise.resolve()).then(() => {
          window.mm = s.create('svg#mindmap', null, a)
        })
      })(
        {
          t: 'heading',
          d: 1,
          p: {},
          v: 'markmap-lib',
          c: [
            {
              t: 'heading',
              d: 2,
              p: {},
              v: 'Links',
              c: [
                {
                  t: 'list_item',
                  d: 3,
                  p: {},
                  v:
                    '<a href="https://markmap.js.org/" target="_blank" rel="noopener noreferrer">https://markmap.js.org/</a>'
                },
                {
                  t: 'list_item',
                  d: 3,
                  p: {},
                  v:
                    '<a href="https://github.com/gera2ld/markmap-lib" title="" target="_blank" rel="noopener noreferrer">GitHub</a>'
                }
              ]
            },
            {
              t: 'heading',
              d: 2,
              p: {},
              v: 'Related',
              c: [
                {
                  t: 'list_item',
                  d: 3,
                  p: {},
                  v:
                    '<a href="https://github.com/gera2ld/coc-markmap" title="" target="_blank" rel="noopener noreferrer">coc-markmap</a>'
                },
                {
                  t: 'list_item',
                  d: 3,
                  p: {},
                  v:
                    '<a href="https://github.com/gera2ld/gatsby-remark-markmap" title="" target="_blank" rel="noopener noreferrer">gatsby-remark-markmap</a>'
                }
              ]
            },
            {
              t: 'heading',
              d: 2,
              p: {},
              v: 'Features',
              c: [
                { t: 'list_item', d: 3, p: {}, v: 'links' },
                { t: 'list_item', d: 3, p: {}, v: '<strong>inline</strong> <del>text</del> <em>styles</em>' },
                { t: 'list_item', d: 3, p: {}, v: 'multiline<br/>text' },
                { t: 'list_item', d: 3, p: {}, v: '<code>inline code</code>' },
                {
                  t: 'list_item',
                  d: 3,
                  p: {},
                  v: '<pre><code class="language-js">console.log(\'code block\');\n</code></pre>'
                },
                {
                  t: 'list_item',
                  d: 3,
                  p: {},
                  v: 'MathJax - <code>\\(x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}\\)</code>'
                }
              ]
            }
          ]
        },
        (a, t, e) => a(t, e),
        ['mathJax', 'prism'],
        { mathJax: true, prism: true }
      )
    </script>
  </body>
</html>
